<template>
  <div class="chart1Head-open">
    <div class="chart1-nav flex-v-center">
      <span
        v-for="item in chart1_nav_list"
        :key="item.value"
        :class="{ 'cns-active': item.value == cns_active }"
        @click="cnsHandle(item.value)"
      >
        {{ item.navName }}
      </span>

      <el-select
        v-if="this.type === 'sunnyrainy'"
        size="mini"
        style="margin-left: 10px"
        @change="selSegmentChangeHandle"
        v-model="selSegment"
      >
        <el-option
          :value="item.value"
          :label="item.navName"
          v-for="item in more_chart1_nav_list1"
          :key="item.value"
        ></el-option>
      </el-select>
      <el-popover
        v-else
        placement="bottom"
        width="350"
        v-model="moreVisible"
        trigger="click"
      >
        <div slot="reference">
          <div
            style="padding: 3px 7px"
            :class="{
              'cns-active':
                cns_active !== 1 &&
                cns_active !== 3 &&
                cns_active !== 6 &&
                cns_active !== 12,
            }"
          >
            {{ moreTxt }}<i class="el-icon-caret-bottom"></i>
          </div>
        </div>
        <div class="more-date flex-h-sb">
          <div class="md-chunk">
            <div class="md-tit">区间</div>
            <div
              class="md"
              :class="{ 'md-active': item.value == cns_active }"
              v-for="item in more_chart1_nav_list1"
              :key="item.value"
              @click="cnsHandle(item.value, item.navName)"
            >
              {{ item.navName }}
            </div>
          </div>
          <div class="md-chunk">
            <div class="md-tit">年度</div>
            <div
              class="md"
              :class="{ 'md-active': item == cns_active }"
              v-for="item in yearList"
              :key="item"
              @click="cnsHandle(item, item)"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </el-popover>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    more_chart1_nav_list2: {
      type: Array,
      default: () => {
        return [];
      },
    },
    segment: {
      type: String | Number,
    },
    year: {
      type: String | Number,
    },
    type: {
      type: String,
    },
  },
  data() {
    return {
      chart1_nav_list: [
        { navName: "近一月", value: 1 },
        { navName: "近三月", value: 3 },
        { navName: "近半年", value: 6 },
        { navName: "近一年", value: 12 },
      ],
      more_chart1_nav_list1: [
        { navName: "成立以来", value: 99 },
        { navName: "今年以来", value: 0 },
        { navName: "同区间", value: -1 },
        { navName: "近两年", value: 24 },
        { navName: "近三年", value: 36 },
        { navName: "近五年", value: 60 },
      ],
      cns_active: 0,
      selSegment: 99,
      moreVisible: false,
      yearList: [],
      moreTxt: "成立已来",
    };
  },
  watch: {
    more_chart1_nav_list2: {
      handler(val) {
        // console.log(val);
        this.yearList = [];
        for (let i = val.length; i >= 0; i--) {
          this.yearList.push(val[i]);
        }
        // console.log(this.yearList);
      },
      deep: true,
    },
    segment: {
      handler(val) {
        this.cns_active = val;
        if (val === 99) {
          this.moreTxt = "成立以来";
        }
      },
      deep: true,
    },
  },
  methods: {
    cnsHandle(i, txt) {
      this.moreVisible = false;
      txt ? (this.moreTxt = txt) : (this.moreTxt = "更多");
      this.cns_active = i;
      this.selSegment = "";
      if (i < 100) {
        this.$emit("update:segment", i);
        this.$emit("update:year", "");
      } else {
        this.$emit("update:segment", "");
        this.$emit("update:year", i);
      }
    },
    selSegmentChangeHandle() {
      this.cns_active = "";
      this.$emit("update:segment", this.selSegment);
    },
  },
};
</script>

<style lang="scss" scoped>
.md-tit {
  padding: 10px 0;
  color: #333;
  font-size: 14px;
}
.chart1Head-open {
  display: flex;
  margin-left: 20px;
  .chart1-nav {
    span {
      padding: 4.5px 7px;
      cursor: pointer;
      & + span {
        margin-left: 10px;
      }
    }
    .cns-active {
      color: #e1322d;
      background-color: #fcf5f5;
    }
  }
}
</style>

